<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
	</head>
	<body>
		<form class="layui-form" action="" lay-filter="form-filter">
			<div class="mainBox">
				<div class="main-container">
				    <div class="layui-form-item layui-hide">
                        <label class="layui-form-label required">ID</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" class="layui-input" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">部门</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="deptIdList" lay-verify="required" placeholder="" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">登录账号</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" lay-verify="required|username" placeholder="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">密码</label>
                        <div class="layui-input-block">
                            <div class="layui-input-wrap">
                                <input type="password" name="password" lay-affix="eye" lay-verify="required|password" placeholder="" autocomplete="new-password" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="nickname" lay-verify="required" placeholder="" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="mobilePhone" lay-verify="phone" placeholder="" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">身份证号</label>
                        <div class="layui-input-block">
                            <input type="text" name="idCardNumber" lay-verify="identity" placeholder="" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="gender" placeholder="" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">岗位</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="postIdList" placeholder="" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="roleIdList" placeholder="" class="layui-input">
                        </div>
                    </div>
				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="submit-filter">
						<i class="layui-icon layui-icon-ok"></i>提交
					</button>
					<button type="reset" class="pear-btn pear-btn-sm">
						<i class="layui-icon layui-icon-refresh"></i>重置
					</button>
				</div>
			</div>
		</form>
		<script src="../../../component/layui/layui.js"></script>
		<script src="../../../component/pear/pear.js"></script>
		<script>
			layui.use(['form', 'jquery', 'dict', 'vtlConfig', 'vtlForm'], function() {
				let form = layui.form;
				let $ = layui.jquery;
				let dict = layui.dict;
				let vtlConfig = layui.vtlConfig;
				let vtlForm = layui.vtlForm;
				let url = layui.url();
				let id = url.search.id;
                let deptId = url.search.deptId;

                // 自定义验证规则，如下以验证用户名和密码为例
                form.verify({
                    // 函数写法。参数 value 为表单的值；参数 item 为表单的 DOM 对象
                    username: function(value, item){
                      if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){ return '用户名不能有特殊字符'; }
                      if(/(^_)|(__)|(_+$)/.test(value)) { return '用户名首尾不能出现 _ 下划线'; }
                      if(/^\d+$/.test(value)) { return '用户名不能全为数字'; }
                      if(value.length < 4){ return '用户名至少4位！'; }
                    },
                    // 数组写法。数组中两个成员值分别代表：[正则表达式、正则匹配不符时的提示文字]
                    password: [/^[\S]{6,20}$/, '密码必须为6到20位的非空字符']
                });

				form.on('submit(submit-filter)', function(data) {
				    if(id) {
				        $.put('/sys/user', data.field, function(result) {
                            if (result.code == 200) {
                                $.vtl.closeLayer();
                                parent.refresh();
                            }
                        });
				    } else {
				        $.post('/sys/user', data.field, function(result) {
                            if (result.code == 200) {
                                $.vtl.closeLayer();
                                parent.refresh();
                            }
                        });
				    }

					return false;
				});

				window.initDeptSelector = function() {
					let data = [];
					$.sync('get', '/sys/dept/treeTableDataList', function(result){
						data = $.vtl.tree(result, '0');
					});

					let config = { data: data, tree: { show: true },radio:true,clickClose:true };
					vtlForm.initXmSelect('form input:hidden[name=deptIdList]', config);
				}

				window.initPostSelector = function() {
					let data = [];
					$.sync('get', '/sys/post/list', function(result){
						data = result;
					});

					let config = { data: data };
					vtlForm.initXmSelect('form input:hidden[name=postIdList]', config);
				}

				window.initRoleSelector = function() {
					let data = [];
					$.sync('get', '/sys/role/list', function(result){
						data = result.filter(role => role.id != 1 || role.code != 'role_super_admin');
					});

					let config = { data: data };
					vtlForm.initXmSelect('form input:hidden[name=roleIdList]', config);
				}

				window.init = function(id) {
                    vtlForm.initRadioByDict('form input:radio[name=gender]', 'sys_user_gender');
				    if(id) {
				        $('form input:password[name=password]').removeAttr('lay-verify').parents('div .layui-form-item').remove();
                		$.sync('get', '/sys/user/detail/' + id, function(result) {
                		    form.val("form-filter", result);
                            $('form input:hidden[name=deptIdList]').val(result.deptList.map(dept => dept.id).join());
                            $('form input:hidden[name=postIdList]').val(result.postList.map(post => post.id).join());
                            $('form input:hidden[name=roleIdList]').val(result.roleList.map(role => role.id).join());
                		});
                    } else {
                        $('form input:hidden[name=deptIdList]').val(deptId);
                        $('form input:password[name=password]').val(vtlConfig.getValByCode('sys_user_init_password'));
                    }
                    window.initDeptSelector();
                    window.initPostSelector();
                    window.initRoleSelector();
				}

				window.init(id);
			})
		</script>
	</body>
</html>
